<script>
export default {
  name: 'FileTranslationPage',
  data() {
    return {
      fileList: [],
      translatedFile: null,
      translatedFileUrl: '',
      translatedFileName: ''
    };
  },
  methods: {
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-1);
    },
    submitUpload() {
      // 这里可以添加上传文件的逻辑
      const file = this.fileList[0].raw;
      console.log('上传文件:', file);
      // 调用上传文件的API
    },
    translateFile() {
      // 这里可以添加翻译文件的逻辑
      const file = this.fileList[0].raw;
      console.log('翻译文件:', file);
      // 调用翻译文件的API
      // 假设翻译完成后返回一个Blob对象
      const translatedBlob = new Blob(['翻译后的文件内容'], { type: 'text/plain' });
      this.translatedFile = translatedBlob;
      this.translatedFileUrl = URL.createObjectURL(translatedBlob);
      this.translatedFileName = 'translated_' + file.name;
    },
    downloadFile() {
      if (this.translatedFileUrl) {
        const link = document.createElement('a');
        link.href = this.translatedFileUrl;
        link.download = this.translatedFileName;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    }
  }
};
</script>

<template>
  <div class="file-translation-container">
    <el-upload
      class="upload-container"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-change="handleChange"
      :file-list="fileList"
      :auto-upload="false"
      :show-file-list="true"
    >
      <template v-slot:trigger>
        <el-button type="primary">{{ $t('Translation.file.uploadButton') }}</el-button>
      </template>
      <el-button style="margin-left: 10px" type="success" @click="submitUpload">{{ $t('Translation.file.upload') }}</el-button>
      <template v-slot:tip>
        <div class="el-upload__tip">{{ $t('Translation.file.uploadTip') }}</div>
      </template>
    </el-upload>
    <el-button type="primary" @click="translateFile" :disabled="!fileList.length">{{ $t('Translation.file.translate') }}</el-button>
    <el-button type="primary" @click="downloadFile" :disabled="!translatedFile">{{ $t('Translation.file.download') }}</el-button>
    <div v-if="translatedFile" class="translated-file">
      <h3>{{ $t('Translation.file.translatedFile') }}</h3>
      <a :href="translatedFileUrl" :download="translatedFileName">{{ $t('Translation.file.clickDownload') }}</a>
    </div>
  </div>
</template>


<style scoped>
@import "/src/css/base.css";
@import "/src/css/translation/file-translation.css"
</style>
